<template>
  <view>
    <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
     :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
     indicator-active-color="#0081ff" @tap="previewImage">
    	<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
    		<view class="swiper-item">
    			<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
    			<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
    		</view>
    	</swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    props: {
      swiperList: Array,
      dotStyle: Boolean
    },
  	data () {
      return {
        cardCur: 0
      }
    },
    methods: {
      cardSwiper(e) {
      	this.cardCur = e.detail.current
      },
      previewImage () {
        const urls = this.swiperList.map(item => item.url)
        uni.previewImage({
          urls
        })
      }
    }
  }
</script>

<style>
</style>
